<template>
	<div class="page has-navbar has-tabbar" v-nav="{title: '订阅车辆', showBackButton: true}">
		<div class="page-content padding-top reserve-margin">
			<scroller class="page-content cars-box" :on-refresh="onRefresh" :on-infinite="onInfinite" ref="scroller">
				<car-options :carsList="carsList" ></car-options>
			</scroller>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				carsList:[],
				pageIndex:0,
				pageSize:10,
			}
		},
		methods:{
			onRefresh(){
				this.pageIndex = 1
				this.carsList = []
				this.carsInit()
			},
			onInfinite(){
				this.pageIndex++
				this.carsInit()
			},
			carsInit(){
				axios.get(baseUrl+'/controller/car/getCarListByCarSelectTemplate',{params:{
					carSaleState: 20,
	    			marketId:sess.get('userSession').marketId||1,
	    			shopId:sess.get('userSession').shopId,
	    			pageIndex:this.pageIndex,
	    			pageSize:this.pageSize,
	    		}}).then((res)=>{
	    			this.carsList = this.carsList.concat(res.data.result)
	    			if(res&&res.data.length>0){
	    				this.$refs.scroller.finishPullToRefresh(true)
	    				this.$refs.scroller.finishInfinite()
	    			}else{
	    				this.$refs.scroller.finishPullToRefresh(true)
	    				this.$refs.scroller.finishInfinite(true)
	    			}
	    		})
			}
		}
	}
</script>
